﻿<style>
    .sliderDirective {
        height: 2px;
        background-color: black;
        opacity: 1;
        margin-top: 10px;
        border: none;
        width: 94%;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background: none;
        background-color: #FCAF17;
        border-radius: 20px;
        height: 30px;
        width: 30px;
        margin-top: -10px;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        font-family: Calibri;
        pointer-events: none;
        cursor: default;
        border: none;
        padding-top: 4px;   
    }
    

</style>
<div ng-controller="SummaryRelativePerformanceDetailsController as relativeDetailsCtrl">
    <div class="border-spacer">Relative performance details</div>    
    <table class="table table_gov">
        <thead>
            <tr>
                <th class="table-head width_20p" style="border-left: none !important; border-top: none !important;"></th>
                <th class="table-head width_10p center-align">
                    Score
                </th>
                <th class="table-head width_20p">
                    Assessment
                </th>
                <th class="table-head width_25p center-align">
                    Region ({{relativeDetailsCtrl.companyRelativePerformanceDetails.noOfRegionCompanies}} companies)<br/>
                    {{relativeDetailsCtrl.companyRelativePerformanceDetails.region}}
                </th>
                <th class="table-head width_25p center-align">
                    Industry ({{relativeDetailsCtrl.companyRelativePerformanceDetails.noOfIndustryCompanies}} companies)<br/>
                    {{relativeDetailsCtrl.companyRelativePerformanceDetails.industry}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in relativeDetailsCtrl.companyRelativePerformanceDetails.issues">
                <td class="table-cell">
                    <a href="" ng-click="relativeDetailsCtrl.switchView(item.number)">{{item.name}}</a>   
                </td>
                <td class="table-cell center-align">
                    <div class="green-number-bubble_small">
                        {{item.score}}
                    </div>
                </td>
                <td class="table-cell">
                    {{relativeDetailsCtrl.getAssesmentType(item.assesmentType)}}
                </td>
                <td class="table-cell center-align">
                    <slider min="0" max="100" ng-model="item.regionPercentile" class="sliderDirective"></slider> 
                    <!--<slider  value="{{item.regionPercentile}}" ></slider>-->
                </td>
                <td class="table-cell center-align">
                    <slider min="0" max="100" ng-model="item.industryPercentile" class="sliderDirective"></slider>
                </td>
            </tr>
        </tbody>
    </table>
</div>
                